<template>
  <div class="program-list">
    <div class="list-nav flex items-center justify-between">
      <h3>{{ programs?.name }}</h3>
      <span class="yu-textColor-hover cursor-pointer">更多 ></span>
    </div>
    <ul class="list-content">
      <li
          v-for="(pro, index) in programs?.programs"
          :key="pro?.id"
          class="mb-2  justify-between pr-3 cursor-pointer yu-bgColor-hover-only"
          @mousemove="mousemove(pro?.program ? pro?.program?.id : pro?.id)"
          @mouseleave="mouseleave"
      >
        <div v-if="!pro.program" class="flex items-center justify-between">
          <div class="flex">
            <div class="w-10 h-10 mr-1 relative">
              <img class="w-full h-full" :src="pro?.coverUrl" alt="">
              <span
                  class="play i-ic-outline-play-circle text-xl"
                  v-show="showPlay === pro?.id"
                  @click="play(pro)"
              />
            </div>
            <span class="text-xs flex flex-col justify-around">
            <span class="w-65 truncate yu-textColor-hover" @click.stop="jumpRadioProgram(pro?.id)">{{ pro?.name }}</span>
            <span class="mt-1 yu-titleColor yu-textColor-hover" @click.stop="jumpRadio(pro?.radio?.id)">{{ pro?.radio?.name }}</span>
          </span>
          </div>
          <div v-if="store.isFlag">
            <span class="text-xs border-1 yu-titleColor" style="padding: 1px">{{ pro?.radio?.category }}</span>
          </div>
        </div>
        <div v-else class="flex items-center justify-between">
          <div class="flex">
            <div class="flex flex-col items-center w-10">
              <span>{{ pro?.rank }}</span>
              <span class="flex text-xs">
                <span v-if="(pro?.lastRank - pro?.rank) === 0" class="text-gray">{{ pro?.lastRank - pro?.rank }}</span>
                <span v-else-if="pro?.lastRank === -1 " class="text-green">new</span>
                <span v-else :class="pro?.lastRank !== -1 && pro?.lastRank - pro?.rank > 0 ? 'text-green' : 'text-red' ">{{ pro?.lastRank - pro?.rank }}</span>
              </span>
            </div>
            <div class="w-10 h-10 mr-1 relative">
              <img class="w-full h-full" :src="pro?.program?.coverUrl" alt="">
              <span
                  class="play i-ic-outline-play-circle text-xl"
                  v-show="showPlay === pro?.program?.id"
                  @click="play(pro)"
              />
            </div>
            <span class="text-xs flex flex-col justify-around">
            <span class="w-65 truncate yu-textColor-hover"  @click.stop="jumpRadioProgram(pro?.program?.id)">{{ pro?.program?.name }}</span>
            <span class="mt-1 yu-titleColor yu-textColor-hover w-65 truncate" @click="jumpRadio(pro?.program?.radio?.id)">{{ pro?.program?.radio?.name }}</span>
          </span>
          </div>
          <div class="w-30" v-if="store.isFlag">
            <van-progress
                :color="store.theme.secondaryBgColor"
                :percentage="Number(pro?.score / programs?.programs[0].score).toFixed(1) * 100"
                pivot-text=" "
            />
          </div>
        </div>

      </li>
    </ul>
  </div>
</template>

<script setup>

import {ref} from "vue";
import {useStore} from "@/store/index";
import {useRouter} from "vue-router";

const router = useRouter()
const store = useStore()
// 是否展示播放按钮
const showPlay = ref(null)

// 鼠标移动到当前的节目设置id
const mousemove = (id) => {
  showPlay.value = id
}

// 离开将id清除
const mouseleave = () => {
  showPlay.value = null
}

// 播放当前节目
const play = (pro) => {
  console.log(pro)
  let id
  // 判断是节目排行还是，节目推荐
  if (pro?.program) {
    id = pro?.program?.mainSong?.id
  } else {
    id = pro?.id
  }
  store.getSongDetail(id)
}

// 跳转到电台节目详情
const jumpRadioProgram = (id) => {
  router.push({
    path: '/radio-program',
    query: {
      id
    }
  })
}

// 跳转到电台节目详情
const jumpRadio = (id) => {
  router.push({
    path: '/dj-radio',
    query: {
      id
    }
  })
}

defineProps({
  programs: {} // 接受节目数据
})
</script>

<style scoped lang="scss">
.play {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
